<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课堂练习题</title>
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
	<script src="../js/vue.js"></script>
</head>
<body>
	<fieldset id="E01">
		<legend v-pre>水泊梁山</legend>
		<ul>
			<li>{{text}}</li>
			<li>{{text1}}</li>
			<li>{{text2}}</li>
		</ul>
	</fieldset>
	<script type="text/javascript">
	/**
	1.在legend中写入 "水泊梁山", 并且让其内容不可改变
	2.在三个 li 中 写入三个水浒英雄的名字
	*/
	var v1 = new Vue({
		el : "#E01",
		data : {
			text : "林冲",
			text1: "李逵",
			text2: "鲁智深"
		}
	});
	</script>

	<fieldset id="E02">
		<legend v-cloak></legend>
		<ul>
			<li v-html="text"></li>
			<li v-html="text1"></li>
			<li v-html="text2"></li>
		</ul>
	</fieldset>
	<script type="text/javascript">
	/**
	1.在legend中写入 "水泊梁山" 并加上"斗篷"
	2.给每个li中添加一个按钮, 每个按钮上显示一个水浒英雄的名字
	*/
	var v2 = new Vue({
		el : "#E02",
		data: {
			text: "<button type='button'>武松</button>",
			text1: "<button type='button'>宋江</button>",
			text2: "<button type='button'>林冲</button>"
		},

	})
	</script>


	<fieldset id="E03">
		<legend>练习题3: 计算属性</legend>
		<dl>
			<dt>{{text}}</dt>
			<dd>力量:{{power}}</dd>
			<dd>智力:{{intel}}</dd>
			<dd>敏捷:{{agile}}</dd>
			<dd>综合战力:{{myAttribute}}</dd>
		</dl>
	</fieldset>
	<script type="text/javascript">
	var heroe = {name:"花和尚鲁智深",power:98, intel:76, agile:73};
	/**
	1. 将 heroe 对象的值设置到 dl 中
	3. 第 4 个 dd 使用计算属性算出其综合战力值 = 力量 + 智力 + 敏捷
	*/
	var v3 = new Vue({
		el : "#E03",
		data : {
			text : heroe.name,
			power: heroe.power,
			intel: heroe.intel,
			agile: heroe.agile
		},
		computed:{
			myAttribute(){
				return this.power + this.intel + this.agile;
			}
		}
	})
	</script>


	<fieldset id="E04">
		<legend >练习题4: 样式设置</legend>
		<div v-bind:style="mystyle()">
			<img v-bind:src="src1":style="imageHeight()" ><br> <span >{{name1}}</span>
		</div>
		<div v-bind:style="mystyle()">
			<img v-bind:src="src2":style="imageHeight()" ><br> <span >{{name2}}</span>
		</div>
		<div v-bind:style="mystyle()">
			<img v-bind:src="src3":style="imageHeight()" ><br> <span >{{name3}}</span>
		</div>
	</fieldset>
	<script type="text/javascript">
	/**
	1. img 中添加水浒英雄的图片, 并且使用属性设定高度为100px
	2. 给 div 设置: 宽度120px + 文字居中 + 边框 + 行内块 + 内边距5px
	3. 给 span 添加英雄名字
	*/
	var v4 = new Vue({
		el : "#E04",
		data: {
			name1: "索超",
			src1:  "../images/s1.jpg",
			name2: "燕青",
			src2:  "../images/s2.jpg",
			name3: "李逵",
			src3:  "../images/s3.jpg"
		},
		methods:{
			imageHeight(){
				return {height : "120px"};
			},
			mystyle(){
				return {width: '120px', textAlign:'center', border: '1px solid red', display: 'inline-block', padding: '5px'  };
			}
		}

	})
	</script>


	<style>
	.border {
		border: 2px solid blue;
	}
	
	.text {
		color: red;
		text-align: center;
	}
	
	.size {
		width: 150px;
		height: 150px; padding : 5px;
		display: inline-block;
		margin: 5px;
		padding: 5px;
	}
	</style>
	<fieldset id="E05">
		<legend>练习题5: class属性</legend>
		<div id="div1" v-bind:class="['size']" >
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div2" v-bind:class="{size: flag1,text : flag2}">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div3":class="style" >
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"> 
			<br> 关注样式
		</div>
	</fieldset>
	<script type="text/javascript">
	/**
	1. 将 .size 样式应用到 div1 上 ( 数组方式)
	2. 将 .border .size 样式应用到 div2 上 ( 对象方式)
	2. 将 .border .text .size 样式应用到 div3 上 ( 计算属性方式)
	*/
	var v5 = new Vue({
		el : "#E05",
		data : {
			flag1 : true,
			flag2 : true,
			text1 : "size",
			text2 : "text",
			text3 : "border"
		},
		computed: {
			style(){
				return [this.text1,this.text2,this.text3];
			}
		}


	})
	</script>


</body>
</html>